<template>
  <el-card class="visual-container">
    <visual-item :visualItemList="visualItemList"></visual-item>
    <main class="main">
      <div class="left">
        <div class="top">
          <icon-item :list="iconList"></icon-item>
          <map-charts></map-charts>
        </div>
        <bar-line-charts></bar-line-charts>
      </div>
      <div class="right">
        <pie-charts :list="userGroupList" title="用户渠道"></pie-charts>
        <pie-charts :list="hotGoodsList" title="热销商品"></pie-charts>
      </div>
    </main>
  </el-card>
</template>

<script>
import visualItem from '../components/visual-item'
import iconItem from '../components/icon-item'
import pieCharts from '../components/pie-charts'
import mapCharts from '../components/map-charts'
import barLineCharts from '../components/bar-line-charts'
export default {
  name: 'visual',
  data() {
    return {
      // 上方的item项
      visualItemList: [
        {
          title: '昨日订单数量',
          num: 13,
          ratio: '-5%',
        },
        {
          title: '本月订单数量',
          num: 284,
          ratio: '-2%',
        },
        {
          title: '昨日支付金额',
          num: '489.00',
          ratio: '-4%',
        },
        {
          title: '本月支付金额',
          num: '9423.27',
          ratio: '-8%',
        },
      ],
      // 用户渠道
      userGroupList: [
        {
          channel: '公众号',
          num: 279,
        },
        {
          channel: 'h5',
          num: 880,
        },
        {
          channel: 'App',
          num: 3253,
        },
        {
          channel: '小程序',
          num: 618,
        },
      ],
      // 热销商品
      hotGoodsList: [
        {
          channel: '雪纺衫',
          num: 479,
        },
        {
          channel: '斜跨女包',
          num: 680,
        },
        {
          channel: '阿玛尼',
          num: 2253,
        },
        {
          channel: '新款外套',
          num: 1218,
        },
      ],
      // 图标
      iconList: [
        {
          text: '新增量',
          num: 451,
          bgColor: '#e7f4ff',
          color: '#1890ff',
          fontClass: 'icon-xinzengshangpin',
        },
        {
          text: '浏览量',
          num: 687,
          bgColor: '#f6f1ff',
          color: '#a277ff',
          fontClass: 'icon-icon',
        },
        {
          text: '收藏量',
          num: 157,
          bgColor: '#fdf8e5',
          color: '#ef9c20',
          fontClass: 'icon-shoucang',
        },
        {
          text: '加购量',
          num: 451,
          bgColor: '#e8f8f0',
          color: '#1bbe6b',
          fontClass: 'icon-shoucangjiagou',
        },
        {
          text: '交易总数',
          num: 87,
          bgColor: '#edfafb',
          color: '#4bcad5',
          fontClass: 'icon-jiaoyishezhi',
        },

        {
          text: '交易成功',
          num: 53,
          bgColor: '#fdf5e8',
          color: '#ef9c20',
          fontClass: 'icon-zhixing',
        },
        {
          text: '佣金金额',
          num: 450.1,
          bgColor: '#fdf5e8',
          color: '#ef9c20',
          fontClass: 'icon-yongjin',
        },
        {
          text: '营业额',
          num: 687.45,
          bgColor: '#e7f4ff',
          color: '#1890ff',
          fontClass: 'icon-leijishouru',
        },
      ],
    }
  },
  components: {
    visualItem,
    pieCharts,
    iconItem,
    mapCharts,
    barLineCharts,
  },
}
</script>

<style lang="scss" scoped>
.visual-container {
  padding: 0 20px;
  .main {
    width: 100%;
    margin-top: 15px;
    .left {
      float: left;
      width: 77%;
      .top {
        height: 330px;
      }
    }
    .right {
      width: 23%;
      float: right;
    }
  }
}
</style>
